<template>
  <div class="admin-list-box all-list-box"  @touchstart="touchStart($event)" @touchend="touchEnd($event)">   
    <div class="admin-list isbtn" v-for="(item,index) in adminList" :key="index" @click="goDetail(item.channelUserId)">
        <div class="first-line"> 
            <div class=""><span>用户名:</span>{{item.nickName}}</div>
            <div :class="[item.status==1?'thim-color':'gray-color']"><span>状态:</span>{{item.status == 1 ? '正常':'冻结'}}</div>
        </div>
        <div class="second-line">
            <span>登录名:</span>{{item.userName}}
        </div>
    </div> 
    <nodata v-if="!adminList || adminList.length==0" />

    <div class="height120"></div>
    <div class="boot-btn isbtn" @click="addManage()">
        新建管理员
    </div>
  </div>
</template>

<script>
import api from '@/api/api.js' 
import nodata from '@/components/nodata'
import { Message } from 'element-ui' 
export default { 
  components: {
    nodata
  },
  data () {
    return { 
        adminList:[],
        filterObj:{
            pageNum:1,
            pageSize:10
        },
        isLoading:false,
    }
  },
  mounted () { 
      this.filterObj.pageNum = 1;
      this.getList()
  },
  filters: {
     
  },
  methods: { 
    goDetail(id){
        this.$router.push({path:'/adminDetail',query:{id}})
    },
    addManage(){
        this.$store.commit("setShopList",[]);
        this.$router.push({path:'/adminAdd'})
    },
    getList(){
      this.isLoading = true;
      api.adminMng.adminList({
        pageNum:this.filterObj.pageNum,
        pageSize:this.filterObj.pageSize,
      },res=>{ 
        this.isLoading = false;
        this.filterObj.totalPage = res.result.totalPage;
        this.adminList =this.filterObj.pageNum==1? res.result.data : this.adminList.concat(res.result.data);
      })
    },
    touchStart(e) {
        this.startY = e.targetTouches[0].pageY;
        this.startX = e.targetTouches[0].pageX;  
    },
    scrollToEnd(e) {
        let scrollHeight = this.$el.scrollHeight; 
        let clientHeight = this.$el.clientHeight; 
        let scrollTop = this.$el.scrollTop;   
        if (scrollTop + clientHeight >= scrollHeight -60) { //下拉到底了 
          this.doLoadMore()  
        } 
    },
    touchEnd(e) {
      if (this.isLoading) {
          return;
      }
      let endX = e.changedTouches[0].pageX,
          endY = e.changedTouches[0].pageY,
          dy = this.startY - endY,
          dx = endX - this.startX;
      if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return;
      }
      if (endY < this.startY) {
          this.scrollToEnd(e)
      }
    },
    doLoadMore() {  
        if(this.filterObj.pageNum < this.filterObj.totalPage){ 
          ++this.filterObj.pageNum;
          this.getList()
        }
        return 
    },
  }
}
</script>
<style lang="less" scoped>
.admin-list-box{
    min-height: 100vh;
    background: #f7f7f7;
    padding-top: .24rem;
}
.admin-list{
   width: 7.10rem;
   background: #fff;
   margin:0 auto .24rem;
   border-radius: .15rem;
   padding: .24rem;
   box-shadow: 1px 1px 0.24rem 0 rgba(36, 36, 36, 0.05); 
}
.second-line{
    margin-top: 0.20rem;
}
.first-line{
    display: flex;
    &>div{
        flex: 1;
        span{
            color: #999;
            margin-right: .12rem;
        }
    }
}
.second-line span{
    color: #999;
    margin-right: .12rem;
}
.height120{
    height: 1.20rem;
}
.boot-btn{
    height: 1.0rem;
    text-align: center;
    line-height: 1.0rem;
    color: #fff;
    font-size: .32rem;
    position: fixed;
    left: 0;
    width: 7.50rem;
    bottom: 0;
    background: #FABE00;
}
.gray-color{
    color: red;
}
</style>